<template>
    <div class="main-page-content page-demo-form-advanced">

        <a-card class="form-card" :loading="loading_page" :bordered="false" title="仓库管理" >
            <a-form-model
                    ref="ruleForm"
                    :model="form_data"
                    :rules="form_rules"
                    layout="vertical"
                >
                <a-row class="form-row" :gutter="16">
                    <a-col :lg="6" :md="12" :sm="24">
                        <a-form-model-item label="仓库名：" >
                            <a-input v-model="form_data.name" placeholder="请填写仓库名称"/>
                        </a-form-model-item>
                    </a-col>
                    <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
                        <a-form-model-item label="仓库域名：" >
                            <a-input addon-before="Http://" addon-after=".com" v-model="form_data.site" placeholder="请填写仓库域名" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
                        <a-form-model-item label="所属公司：" >
                            <a-select v-model="form_data.style" placeholder="请选择仓库所属公司">
                                <a-select-option value="1">成都分公司</a-select-option>
                                <a-select-option value="2">宜宾分公司</a-select-option>
                            </a-select>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row class="form-row" :gutter="16">
                    <a-col :lg="6" :md="12" :sm="24">
                        <a-form-model-item label="审批人：" >
                             <a-select v-model="form_data.style" placeholder="请选择审批人员">
                                <a-select-option value="1">成都分公司</a-select-option>
                                <a-select-option value="2">宜宾分公司</a-select-option>
                            </a-select>
                        </a-form-model-item>
                    </a-col>
                    <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
                        <a-form-model-item label="生效日期" >
                            <a-range-picker v-model="form_data.date_range" style="width:100%;" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
                        <a-form-model-item label="仓库类型" >
                            <a-select v-model="form_data.type" placeholder="请选择仓库类型">
                                <a-select-option value="1">公开</a-select-option>
                                <a-select-option value="2">私密</a-select-option>
                            </a-select>
                        </a-form-model-item>
                    </a-col>
                </a-row>
            </a-form-model>
        </a-card>

        <!-- 任务管理 start -->
        <a-card class="form-card" :loading="loading_page" :bordered="false" title="任务管理" >
            <a-form-model
                    ref="ruleForm"
                    :model="form_data"
                    :rules="form_rules"
                    layout="vertical"
                >
                <a-row class="form-row" :gutter="16">
                    <a-col :lg="6" :md="12" :sm="24">
                        <a-form-model-item label="仓库名：" >
                            <a-input v-model="form_data.name" placeholder="请填写仓库名称"/>
                        </a-form-model-item>
                    </a-col>
                    <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
                        <a-form-model-item label="仓库域名：" >
                            <a-input addon-before="Http://" addon-after=".com" v-model="form_data.site" placeholder="请填写仓库域名" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
                        <a-form-model-item label="所属公司：" >
                            <a-select v-model="form_data.style" placeholder="请选择仓库所属公司">
                                <a-select-option value="1">成都分公司</a-select-option>
                                <a-select-option value="2">宜宾分公司</a-select-option>
                            </a-select>
                        </a-form-model-item>
                    </a-col>
                </a-row>
                <a-row class="form-row" :gutter="16">
                    <a-col :lg="6" :md="12" :sm="24">
                        <a-form-model-item label="审批人：" >
                             <a-select v-model="form_data.style" placeholder="请选择审批人员">
                                <a-select-option value="1">成都分公司</a-select-option>
                                <a-select-option value="2">宜宾分公司</a-select-option>
                            </a-select>
                        </a-form-model-item>
                    </a-col>
                    <a-col :xl="{span: 7, offset: 1}" :lg="{span: 8}" :md="{span: 12}" :sm="24">
                        <a-form-model-item label="生效日期" >
                            <a-range-picker v-model="form_data.date_range" style="width:100%;" />
                        </a-form-model-item>
                    </a-col>
                    <a-col :xl="{span: 9, offset: 1}" :lg="{span: 10}" :md="{span: 24}" :sm="24">
                        <a-form-model-item label="仓库类型" >
                            <a-select v-model="form_data.type" placeholder="请选择仓库类型">
                                <a-select-option value="1">公开</a-select-option>
                                <a-select-option value="2">私密</a-select-option>
                            </a-select>
                        </a-form-model-item>
                    </a-col>
                </a-row>
            </a-form-model>
        </a-card>
        <!-- 任务管理 end -->

        <!-- 成员列表 start -->
        <a-card class="form-card" :loading="loading_page" :bordered="false" >
            <a-table
                :columns="columns"
                :dataSource="data"
                :pagination="false"
                :loading="loading_page"
            >
                <template v-for="(col, i) in ['name', 'workId', 'department']" :slot="col" slot-scope="text, record">
                    <a-input
                        :key="col"
                        v-if="record.editable"
                        style="margin: -5px 0"
                        :value="text"
                        :placeholder="columns[i].title"
                        @change="e => handleChange(e.target.value, record.key, col)"
                    />
                <template v-else>{{ text }}</template>
                </template>
                <template slot="operation" slot-scope="text, record">
                    <template v-if="record.editable">
                        <span v-if="record.isNew">
                            <a @click="saveRow(record)">添加</a>
                            <a-divider type="vertical" />
                            <a-popconfirm title="是否要删除此行？" @confirm="remove(record.key)">
                                <a>删除</a>
                            </a-popconfirm>
                        </span>
                        <span v-else>
                            <a @click="saveRow(record)">保存</a>
                            <a-divider type="vertical" />
                            <a @click="cancel(record.key)">取消</a>
                        </span>
                    </template>
                    <span v-else>
                        <a @click="toggle(record.key)">编辑</a>
                        <a-divider type="vertical" />
                        <a-popconfirm title="是否要删除此行？" @confirm="remove(record.key)">
                            <a>删除</a>
                        </a-popconfirm>
                    </span>
                </template>
            </a-table>
        </a-card>
        <!-- 成员列表 end -->

        
        <a-affix :offset-bottom="0">
            <div class="page-footer">
                <a-row>
                    <a-col :span="12"></a-col>
                    <a-col :span="12" style="text-align:right;">
                        <a-button type="primary">提交</a-button>
                    </a-col>
                </a-row>
            </div>
        </a-affix>
        
    </div>
</template>

<script>
export default {
    data(){
        return {
            "loading_page"  : false,

            // 表单数据
            "form_data" : {
                "name"  : "",
                "site"  : "",
                "style" : "",
                "type"  : 1,
                "date_range":[]
            },
            // 表单规则
            "form_rules":{},

            // 表单列
            "columns": [
                {
                    title: '成员姓名',
                    dataIndex: 'name',
                    key: 'name',
                    width: '20%',
                    scopedSlots: { customRender: 'name' }
                },
                {
                    title: '工号',
                    dataIndex: 'workId',
                    key: 'workId',
                    width: '20%',
                    scopedSlots: { customRender: 'workId' }
                },
                {
                    title: '所属部门',
                    dataIndex: 'department',
                    key: 'department',
                    width: '40%',
                    scopedSlots: { customRender: 'department' }
                },
                {
                    title: '操作',
                    key: 'action',
                    scopedSlots: { customRender: 'operation' }
                }
            ],
            data: [
                {
                    key: '1',
                    name: '小明',
                    workId: '001',
                    editable: false,
                    department: '行政部'
                },
                {
                    key: '2',
                    name: '李莉',
                    workId: '002',
                    editable: false,
                    department: 'IT部'
                },
                {
                    key: '3',
                    name: '王小帅',
                    workId: '003',
                    editable: false,
                    department: '财务部'
                }
            ],
        };
    },
    created(){
        this.loading_page = true;
        setTimeout(()=>{
            this.loading_page = false;
        },1500);
    },
    methods:{
    }
}
</script>

<style lang="less" scoped>
@import "./advanced.less";
</style>